<nz-card>
  <nz-spin [nzSpinning]="nzLoading">

    <form nz-form class="ant-advanced-search-form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="6">
          <nz-form-item>
            <nz-form-label [nzFor]="'field'">任务号</nz-form-label>
            <nz-form-control>
              {{inspectionTask.code}}
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="6">
          <nz-form-item>
            <nz-form-label [nzFor]="'field'">负责人</nz-form-label>
            <nz-form-control>
              {{inspectionTask.user?.username}}
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="6">
          <nz-form-item>
            <nz-form-label [nzFor]="'field'">任务状态</nz-form-label>
            <nz-form-control>
              <nz-tag
                [nzColor]="inspectionTask.status === 2 ? 'processing' : inspectionTask.status === 3 ? 'success' : inspectionTask.status === 4 ? 'error' : ''">
                {{inspectionTask.status === 2 ? '待办理' : inspectionTask.status === 3 ? '已完成' : inspectionTask.status === 4 ? '已过期' : ''}}</nz-tag>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="6">
          <nz-form-item>
            <nz-form-label [nzFor]="'field'">创建时间</nz-form-label>
            <nz-form-control>
              {{inspectionTask.createTime}}
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

    </form>

    <nz-tabset>
      <nz-tab nzTitle="检验信息">

        <div class="table-container">
          <nz-table *ngFor="let deviceData of inspectionTask.deviceInspectionTaskDeviceList"
                    [nzTitle]="deviceData.device?.name" style="margin-bottom: 20px "
                    #basicTable [nzData]="deviceData" [nzBordered]="true"
                    nzSize="small"
                    [nzShowPagination]="false"
                    [nzFrontPagination]="false"
          >
            <thead>
            <tr>
              <th [nzAlign]="'center'">检验项名称</th>
              <th [nzAlign]="'center'">检验标准</th>
              <th [nzAlign]="'center'">检验结果</th>
              <th [nzAlign]="'center'">附件信息</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of deviceData.deviceInspectionTaskItemList;let index_=index">
              <td>
                {{data['checkItemName']}}
              </td>
              <td [nzAlign]="'center'">
                {{data['checkStandard']}}
              </td>
              <td>
                <input nzSize="small" nz-input [disabled]="readonly" [(ngModel)]="data['checkResult']">
              </td>
              <td>
                <nz-upload
                  nzSize="small"
                  nzAction="api/file/upload"
                  [nzDisabled]="readonly"
                  [nzLimit]="1"
                  [(nzFileList)]="data['fileList']"
                  [nzHeaders]="{ authorization: 'authorization-text' }"
                  (nzChange)="handleChange($event)"
                  [nzDownload]="handleDownload"
                  [nzPreview]="handlePreview"
                >
                  <button nzSize="small" nz-button><i nz-icon nzType="upload"></i>点击上传文件</button>
                </nz-upload>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </div>

      </nz-tab>
    </nz-tabset>

    <div style="float: right" >
      <button *ngIf="!readonly" nz-button nzType="primary" (click)="save()">保存</button>
      <button *ngIf="!readonly" nz-button nzType="primary" (click)="submit()">提交</button>
    </div>

  </nz-spin>


  <!-- 附件预览框 -->
  <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
            (nzOnCancel)="previewVisible = false">
    <ng-template #modalContent>
      <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
    </ng-template>
  </nz-modal>

</nz-card>
